﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Ecology</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">
 	
    <!-- Preloader -->
    <div class="preloader"></div>
    
 	
    <!-- Main Header -->
    <header class="main-header">
    	<div class="top-bar">
        	<div class="top-container">
            	<!--Info Outer-->
                 <div class="info-outer">
                 	<!--Info Box-->
                    <ul class="info-box clearfix">
                        <li><span class="icon flaticon-technology-5" th:text="${user.username}"></span><a href="#">&nbsp;</a></li>
                        
                    </ul>
                 </div>
            </div>
        </div>
    	<!-- Header Upper -->
        <div class="header-upper">
            <div class="auto-container clearfix">
                <!-- Logo -->
                <div class="logo" style="width: 20%">
                    <a href="index.html"><img src="images/logo-1.png" alt="Ecology"></a>
                 </div>
                 
                 <!--Nav Outer-->
                <div class="nav-outer clearfix">
                    
                    <a href="#" class="theme-btn btn-donate" data-toggle="modal" data-target="#donate-popup">Donate</a>
                    
                    <!-- Main Menu -->
                    <nav class="main-menu">
                        
                        <div class="navbar-header">
                            <!-- Toggle Button -->      
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        
                        <div class="navbar-collapse collapse clearfix">
                            <ul class="navigation">
                                <li><a href="about.html">About</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="events.html">Events List</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="gallery.html">Gallery</a></li>
                                <li><a href="contact.html">Contact Us</a></li>
                            </ul>
                        </div>
                    </nav><!-- Main Menu End-->
                    
                </div>
                
            </div>
        </div><!-- Header Top End -->
        
    </header><!--End Main Header -->
    
    
    <!--Page Title-->
    <section class="page-title" style="background-image:url(images/background/page-title-bg.jpg);">
    	<div class="auto-container">
        	<div class="sec-title">
                <h1>Our Blog</span></h1>
                <div class="bread-crumb"><a href="index.html">Home</a> / <a href="#" class="current">Blog</a></div>
            </div>
        </div>
    </section>
    
    
    <!--Sidebar Page-->
    <div class="sidebar-page pg-bg-cl">
    	<div class="auto-container">
        	<div class="row clearfix">
            	
                <!--Content Side-->	
                <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    
                    <!--Projects Section-->
                    <section class="blog-news-section no-padd-bottom no-padd-top padd-right-20">
                            
                        <!--News Column-->
                        <div class="column blog-news-column">
                            <article class="inner-box">
                                <figure class="image-box">
                                    <a href="#"><img src="images/resource/blog-image-7.jpg" alt=""></a>
                                    
                                </figure>
                                <div class="content-box">
                                    <h3><a href="#">A walk to rainforest</a></h3>
                                    <div class="post-info clearfix">
                                        
                                        <div class="post-author">author : Rameen John</div>
                                        <div class="post-options pull-left clearfix">
                                            <a href="#" class="comments-count"><span class="icon flaticon-communication-2"></span> 5</a>
                                            <a href="#" class="fav-count"><span class="icon flaticon-favorite-1"></span> 10</a>
                                        </div>
                                    </div>
                                    <div class="text">Lorem ipsum dolor sit amet, ne nostrud omnesque imperdiet ius. Aeque zril inciderint ad qui. Ei pro doctus sensibus, mel te facete iriure periculis. Tale torquatos est ei. Ut possim aliquip lucilius mel, id altera philoso phia quo. Quodsi torquatos gloriatur mei at, an fierent voluptua.</div>
                                    <a href="#" class="theme-btn btn-style-three">Read More</a>
                                </div>
                            </article>
                        </div>
                        
                        <!--News Column-->
                        <div class="column blog-news-column">
                            <article class="inner-box">
                                <figure class="image-box">
                                    <a href="#"><img src="images/resource/blog-image-8.jpg" alt=""></a>
                                    
                                </figure>
                                <div class="content-box">
                                    <h3><a href="#">Live in green</a></h3>
                                    <div class="post-info clearfix">
                                        <div class="post-author">author : rameen john</div>
                                        <div class="post-options pull-left clearfix">
                                            <a href="#" class="comments-count"><span class="icon flaticon-communication-2"></span> 8</a>
                                            <a href="#" class="fav-count"><span class="icon flaticon-favorite-1"></span> 16</a>
                                        </div>
                                    </div>
                                    <div class="text">Lorem ipsum dolor sit amet, ne nostrud omnesque imperdiet ius. Aeque zril inciderint ad qui. Ei pro doctus sensibus, mel te facete iriure periculis. Tale torquatos est ei. Ut possim aliquip lucilius mel, id altera philoso phia quo. Quodsi torquatos gloriatur mei at, an fierent voluptua.</div>
                                    <a href="#" class="theme-btn btn-style-three">Read More</a>
                                </div>
                            </article>
                        </div>
                        
                        <!--News Column-->
                        <div class="column blog-news-column">
                            <article class="inner-box">
                                <figure class="image-box">
                                    <a href="#"><img src="images/resource/blog-image-9.jpg" alt=""></a>
                                    
                                </figure>
                                <div class="content-box">
                                    <h3><a href="#">For a better tomorrow</a></h3>
                                    <div class="post-info clearfix">
                                        <div class="post-author">author : Maria christi</div>
                                        <div class="post-options pull-left clearfix">
                                            <a href="#" class="comments-count"><span class="icon flaticon-communication-2"></span> 6</a>
                                            <a href="#" class="fav-count"><span class="icon flaticon-favorite-1"></span> 14</a>
                                        </div>
                                    </div>
                                    <div class="text">Lorem ipsum dolor sit amet, ne nostrud omnesque imperdiet ius. Aeque zril inciderint ad qui. Ei pro doctus sensibus, mel te facete iriure periculis. Tale torquatos est ei. Ut possim aliquip lucilius mel, id altera philoso phia quo. Quodsi torquatos gloriatur mei at, an fierent voluptua.</div>
                                    <a href="#" class="theme-btn btn-style-three">Read More</a>
                                </div>
                            </article>
                        </div>
                        
                        <!--News Column-->
                        <div class="column blog-news-column">
                            <article class="inner-box">
                                <figure class="image-box">
                                    <a href="#"><img src="images/resource/blog-image-10.jpg" alt=""></a>
                                    
                                </figure>
                                <div class="content-box">
                                    <h3><a href="#">Renewable energy</a></h3>
                                    <div class="post-info clearfix">
                                        <div class="post-author">author :Little john</div>
                                        <div class="post-options pull-left clearfix">
                                            <a href="#" class="comments-count"><span class="icon flaticon-communication-2"></span> 9</a>
                                            <a href="#" class="fav-count"><span class="icon flaticon-favorite-1"></span> 11</a>
                                        </div>
                                    </div>
                                    <div class="text">Lorem ipsum dolor sit amet, ne nostrud omnesque imperdiet ius. Aeque zril inciderint ad qui. Ei pro doctus sensibus, mel te facete iriure periculis. Tale torquatos est ei. Ut possim aliquip lucilius mel, id altera philoso phia quo. Quodsi torquatos gloriatur mei at, an fierent voluptua.</div>
                                    <a href="#" class="theme-btn btn-style-three">Read More</a>
                                </div>
                            </article>
                        </div>
                        
                        <!-- Styled Pagination -->
                        <div class="styled-pagination padd-top-20 margin-bott-40">
                            <ul>
                                <li><a class="prev" href="#"><span class="fa fa-angle-left"></span>&ensp;Prev</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#" class="active">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a class="next" href="#">Next&ensp;<span class="fa fa-angle-right"></span></a></li>
                            </ul>
                        </div>
                    </section>
                
                    
                </div>
                <!--Content Side-->
                
                <!--Sidebar-->	
                <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
                    <aside class="sidebar">
                    
                        <!-- Search Form -->
                        <div class="widget search-box">
                            
                            <form method="post" action="index.html">
                                <div class="form-group">
                                    <input type="search" name="search-field" value="" placeholder="Enter keyword">
                                    <button type="submit"><span class="icon flaticon-tool-5"></span></button>
                                </div>
                            </form>
                            
                        </div>
                        
                        <!-- Popular Categories -->
                        <div class="widget popular-categories wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="sidebar-title"><h3>Categories</h3></div>
                            
                            <ul class="list">
                            	<li><a class="clearfix" href="#">Nature</a></li>
                                <li><a class="clearfix" href="#">Soil</a></li>
                                <li><a class="clearfix" href="#">Renewable</a></li>
                                <li><a class="clearfix" href="#">Water</a></li>
                                <li><a class="clearfix" href="#">Solar</a></li>
                                <li><a class="clearfix" href="#">Eco Friendly</a></li>
                            </ul>
                            
                        </div>
                        
                        
                        <!-- Recent Posts -->
                        <div class="widget recent-posts wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="sidebar-title"><h3>Latest Posts</h3></div>
                            
                            <article class="post">
                            	<figure class="post-thumb"><img src="images/resource/post-thumb-6.jpg" alt=""></figure>
                                <h4><a href="#">Save the word for tomorrow</a></h4>
                                <div class="post-info"><span class="icon"></span> Author: Simons lee</div>
                            </article>
                            
                             <article class="post">
                            	<figure class="post-thumb"><img src="images/resource/post-thumb-7.jpg" alt=""></figure>
                                <h4><a href="#">Renewable energy is a solution</a></h4>
                                <div class="post-info"><span class="icon "></span> Author: Mimotha Christi</div>
                            </article>
                            
                            <article class="post">
                            	<figure class="post-thumb"><img src="images/resource/post-thumb-8.jpg" alt=""></figure>
                                <h4><a href="#">A long way to rain forest</a></h4>
                                <div class="post-info"><span class="icon "></span> Author: Little John</div>
                            </article>
                            
                        </div>
                        
                        <!-- Archives -->
                        <div class="widget archives-list wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="sidebar-title"><h3>Archives</h3></div>
                            
                            <ul class="list">
                            	<li><a href="#">May 2016</a></li>
                                <li><a href="#">June  2016</a></li>
                                <li><a href="#">July 2016</a></li>
                                <li><a href="#">August 2016</a></li>
                                <li><a href="#">December 2016</a></li>
                                <li><a href="#">November 2016</a></li>
                            </ul>
                            
                        </div>
                        
                        <!-- Popular Tags -->
                        <div class="widget popular-tags">
                            <div class="sidebar-title"><h3>KeyWords</h3></div>
                            
                            <a href="#">Nature</a>
                            <a href="#">Events</a>
                            <a href="#">Energy</a>
                            <a href="#">campaign</a>
                            <a href="#">Earth</a>
                            
                        </div>
                                
                    </aside>
                
                    
                </div>
                <!--Sidebar-->
                
                
            </div>
        </div>
    </div>
    
    <!--Main Footer-->
    <footer class="main-footer" style="background-image:url(images/background/footer-bg.jpg);">
        
        <!--Footer Upper-->        
        <div class="footer-upper">
            <div class="auto-container">
                <div class="row clearfix">
                    
                    <!--Two 4th column-->
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="row clearfix">
                            <div class="col-lg-7 col-sm-6 col-xs-12 column">
                                <div class="footer-widget about-widget">
                                    <div class="logo"><a href="index.html"><img src="../static/images/logo-2-unuse.png" class="img-responsive" alt=""></a></div>
                                    
                                    
                                    <ul class="contact-info">
                                        <li><span class="icon fa fa-map-marker"></span> 447, Broad Way, NewYork</li>
                                        <li><span class="icon fa fa-phone"></span> +11-08-35679</li>
                                        <li><span class="icon fa fa-envelope-o"></span> hello@ecology.com</li>
                                    </ul>
                                    
                                    <div class="social-links-two clearfix">
                                        <a href="#" class="facebook img-circle"><span class="fa fa-facebook-f"></span></a>
                                        <a href="#" class="twitter img-circle"><span class="fa fa-twitter"></span></a>
                                        <a href="#" class="google-plus img-circle"><span class="fa fa-google-plus"></span></a>
                                        <a href="#" class="linkedin img-circle"><span class="fa fa-pinterest-p"></span></a>
                                        <a href="#" class="linkedin img-circle"><span class="fa fa-linkedin"></span></a>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <!--Footer Column-->
                            <div class="col-lg-5 col-sm-6 col-xs-12 column">
                                <h2>About us</h2>
                                <div class="footer-widget links-widget">
                                    
                                <p>Above the law sunny days sweeping the clouds away fateful trip .That started my way to where the air is sweet can you tell me how to get .</p>
                                </div>
                            </div>
                        </div>
                    </div><!--Two 4th column End-->
                    
                    <!--Two 4th column-->
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="row clearfix">
                        
                            
                            <!--Footer Column-->
                            <div class="col-lg-5 col-sm-6 col-xs-12 column">
                                <div class="footer-widget links-widget">
                                    <h2>Recent projects</h2>
                                    <ul>
                                        <li><a href="#">tree plantation</a></li>
                                        <li><a href="#">Drinking water supply</a></li>
                                        <li><a href="#">Campaign</a></li>
                                        <li><a href="#">Waste management</a></li>
                                        
                                        
                                    </ul>
        
                                </div>
                            </div>

                            <!--Footer Column-->
                            <div class="col-lg-7 col-sm-6 col-xs-12 column">
                                <div class="footer-widget news-widget">
                                    <h2>Latest News</h2>    
                                    
                                    <!--News Post-->
                                    <div class="news-post">
                                        <div class="icon"></div>
                                        <div class="news-content"><figure class="image-thumb"><img src="images/resource/post-thumb-4.jpg" alt=""></figure><a href="#">That started my way to where the air is sweet can you tell me how to get</a></div>
                                        
                                    </div>
                                    
                                    <!--News Post-->
                                    <div class="news-post">
                                        <div class="icon"></div>
                                        <div class="news-content"><figure class="image-thumb"><img src="images/resource/post-thumb-5.jpg" alt=""></figure><a href="#">That started my way to where the air is sweet can you tell me how to get</a></div>
                                        
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div><!--Two 4th column End-->
                    
                </div>
                
            </div>
        </div>
        
        <!--Footer Bottom-->
        <div class="footer-bottom">
            <div class="auto-container clearfix">
                <!--Copyright-->
                <div class="copyright text-center">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
            </div>
        </div>
        
    </footer>
</div>
<!--End pagewrapper-->


<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="fa fa-long-arrow-up"></span></div>



<!--Donate Popup-->
<div class="modal fade pop-box" id="donate-popup" tabindex="-1" role="dialog" aria-labelledby="donate-popup" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        	<!--Donation Section-->
            <section class="donation-section">
                <div class="donation-form-outer">
                    <form method="post" action="contact.html">
                        
                        <!--Form Portlet-->
                        <div class="form-portlet">
                            <h3>How Much Would you like to Donate?</h3>
                            
                            <div class="row clearfix">
                                <div class="form-group col-lg-7 col-md-12 col-xs-12 clearfix">
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-1">
                                        <label for="amount-1">$10</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-2" checked>
                                        <label for="amount-2">$25</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-3">
                                        <label for="amount-3">$50</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-4">
                                        <label for="amount-4">$100</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-5">
                                        <label for="amount-5">$150</label>
                                    </div>
                                    
                                </div>
                                
                                <div class="form-group other-amount col-lg-5 col-md-8 col-xs-12 padd-top-10">
                                    
                                    <input type="text" name="other-amount" value="" placeholder="Or Other Amount">
                                    
                                </div>
                                
                            </div>
                        </div>
                        
                        <br>
                        
                        <!--Form Portlet-->
                        <div class="form-portlet">
                            <h4>Billing Information</h4>
                            
                            <div class="row clearfix">
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">First Name <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="First Name" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Last Name <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Last Name" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Email <span class="required">*</span></div>
                                    <input type="email" name="name" value="" placeholder="Email" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Phone <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Phone" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Address 1 <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Address 1" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Address 2 <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Address 2" required>
                                </div>
                                
                            </div>
                        </div>
                        
                        <br>
                        
                        <!--Form Portlet-->
                        <div class="form-portlet">
                            <h4>Payment Information</h4>
                            
                            <div class="payment-option-logo"><img class="img-responsive" src="images/resource/payment-logos.png" alt=""></div>
                            <br>
                            
                            <div class="row clearfix">
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Card Number <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Card Number" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Card Holder Name <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Card Holder Name" required>
                                </div>
                                
                                
                                
                                <div class="form-group col-lg-3 col-md-3 col-xs-12">
                                    <div class="field-label">Expire Date <span class="required">*</span></div>
                                    <select>
                                        <option>01</option>
                                        <option>02</option>
                                        <option>03</option>
                                        <option>04</option>
                                        <option>05</option>
                                        <option>06</option>
                                        <option>07</option>
                                        <option>08</option>
                                        <option>09</option>
                                        <option>10</option>
                                        <option>11</option>
                                        <option>12</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-lg-3 col-md-3 col-xs-12">
                                    <div class="field-label">&nbsp;</div>
                                    <select>
                                        <option>2016</option>
                                        <option>2017</option>
                                        <option>2018</option>
                                        <option>2019</option>
                                        <option>2020</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Security Code (CVC) <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Security Code" required>
                                </div>
                                
                            </div>
                        </div>
                        
                        <div class="text-left"><button type="submit" class="theme-btn btn-style-two">Donate Now</button></div>
                        
                    </form>
                </div>
            </section>
        </div>
    <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/wow.js"></script>
<script src="js/script.js"></script>
</body>
</html>
